//  tooltip
//  ---------------------

$tooltip-bg 				: rgba(0,0,0,0.9) !default;
$tooltip-color 				: #eee !default;
$tooltip-min-width 			: 6em !default;
$tooltip-max-width 			: 30em !default;
$tooltip-border-radius 		: 2px !default;

.tooltip-wrapper:hover .tooltip-content,
.tooltip-wrapper.is-active .tooltip-content {
	visibility: visible;
	opacity: 1;
	z-index: 100;
}
.tooltip-content {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	left: 0;
	@include transition-duration(0.2s);
	@include transition-property(opacity, padding, visibility);
	@include box-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
	@include border-radius($tooltip-border-radius);
	min-width: $tooltip-min-width;
	max-width: $tooltip-max-width;
}
.tooltip-content {
	bottom: 120%;
	@include rem(padding, 6px 16px);
	@include rem(font-size, 12);
	background: $tooltip-bg;
	color: $tooltip-color;
}

/* arrows */
.tooltip-content:before, .tooltip-content:after, .tooltip-content:first-child:after {
	content: '';
	display: block;
	position: absolute;
	left: 10px;
	width: 0;
	height: 0;
	border: 7px outset transparent;
}
.tooltip-content:before {
	bottom: -14px;
	border-top: 7px solid $tooltip-bg;
}